[Fluent/InspectorV2] Fix bugs in number/text input; Add input validation UX; Refactor colorPicker to use new components #16998

georginahalpern · 2025-08-08T16:50:22Z

Separate out the input.tsx component into spinButton.tsx and textInput.tsx since spinButton is more appropriate for handling numerical values
Introduce forceInt param to NumerInputPropertyLine
Both spinButton and textInput now have input validation UX as the user types - if the input is valid, it will automatically propagate to parent. If not, it will display as red background and won't notify parent of change

ColorPicker.tsx refactored to use the new textInput/spinButtons directly,
InfoLabel now an optional param to PrimitiveProps so that primitives can optionally display an infoLabel (with or without the info popup) directly on the primitive value (distinct from the propertyline's label) -- colorpicker usage is refactored accordingly
Add units to spinbutton with inputvalidation as well
minor styling

… inputRefactor

packages/dev/sharedUiComponents/src/fluent/primitives/textInput.tsx

bjsplat · 2025-08-08T16:54:30Z

Please make sure to label your PR with "bug", "new feature" or "breaking change" label(s).
To prevent this PR from going to the changelog marked it with the "skip changelog" label.

bjsplat · 2025-08-08T17:11:09Z

Please make sure to label your PR with "bug", "new feature" or "breaking change" label(s).
To prevent this PR from going to the changelog marked it with the "skip changelog" label.

bjsplat · 2025-08-08T17:25:44Z

Snapshot stored with reference name:
refs/pull/16998/merge

Test environment:
https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/refs/pull/16998/merge/index.html

To test a playground add it to the URL, for example:

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/refs/pull/16998/merge/index.html#WGZLGJ#4600

Links to test babylon tools with this snapshot:

https://playground.babylonjs.com/?snapshot=refs/pull/16998/merge
https://sandbox.babylonjs.com/?snapshot=refs/pull/16998/merge
https://gui.babylonjs.com/?snapshot=refs/pull/16998/merge
https://nme.babylonjs.com/?snapshot=refs/pull/16998/merge

To test the snapshot in the playground with a playground ID add it after the snapshot query string:

https://playground.babylonjs.com/?snapshot=refs/pull/16998/merge#BCU1XR#0

bjsplat · 2025-08-08T17:28:29Z

You have changed file(s) that made possible changes to the sandbox.
You can test the sandbox snapshot here:

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/SANDBOX/refs/pull/16998/merge/

bjsplat · 2025-08-08T17:29:06Z

You have made possible changes to the playground.
You can test the snapshot here:

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/PLAYGROUND/refs/pull/16998/merge/

The snapshot playground with the CDN snapshot (only when available):

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/PLAYGROUND/refs/pull/16998/merge/?snapshot=refs/pull/16998/merge

Note that neither Babylon scenes nor textures are uploaded to the snapshot directory, so some playgrounds won't work correctly.

bjsplat · 2025-08-08T17:30:12Z

You have made possible changes to one or more graph tools. To test the snapshots:

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/TOOLS/refs/pull/16998/merge/nodeEditor/
https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/TOOLS/refs/pull/16998/merge/nodeGeometryEditor/
https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/TOOLS/refs/pull/16998/merge/nodeRenderGraphEditor/
https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/TOOLS/refs/pull/16998/merge/guiEditor/

bjsplat · 2025-08-08T17:46:06Z

Visualization tests for WebGPU

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/refs/pull/16998/merge/testResults/webgpuplaywright/index.html

bjsplat · 2025-08-08T17:51:00Z

WebGL2 visualization test reporter:

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/refs/pull/16998/merge/testResults/webgl2playwright/index.html

bjsplat · 2025-08-11T18:21:56Z

You have changed file(s) that made possible changes to the sandbox.
You can test the sandbox snapshot here:

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/SANDBOX/refs/pull/16998/merge/

bjsplat · 2025-08-11T18:23:39Z

Building or testing the playground has failed.

If the tests failed, results can be found here:
https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/PLAYGROUND/refs/pull/16998/merge/testResults/

bjsplat · 2025-08-11T18:25:17Z

You have made possible changes to one or more graph tools. To test the snapshots:

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/TOOLS/refs/pull/16998/merge/nodeEditor/
https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/TOOLS/refs/pull/16998/merge/nodeGeometryEditor/
https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/TOOLS/refs/pull/16998/merge/nodeRenderGraphEditor/
https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/TOOLS/refs/pull/16998/merge/guiEditor/

bjsplat · 2025-08-11T18:32:41Z

Visualization tests for WebGPU

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/refs/pull/16998/merge/testResults/webgpuplaywright/index.html

bjsplat · 2025-08-11T18:34:44Z

WebGL2 visualization test reporter:

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/refs/pull/16998/merge/testResults/webgl2playwright/index.html

…f keydown

bjsplat · 2025-08-11T19:43:56Z

You have made possible changes to the playground.
You can test the snapshot here:

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/PLAYGROUND/refs/pull/16998/merge/

The snapshot playground with the CDN snapshot (only when available):

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/PLAYGROUND/refs/pull/16998/merge/?snapshot=refs/pull/16998/merge

Note that neither Babylon scenes nor textures are uploaded to the snapshot directory, so some playgrounds won't work correctly.

bjsplat · 2025-08-11T19:49:14Z

You have changed file(s) that made possible changes to the sandbox.
You can test the sandbox snapshot here:

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/SANDBOX/refs/pull/16998/merge/

bjsplat · 2025-08-11T19:50:11Z

You have made possible changes to one or more graph tools. To test the snapshots:

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/TOOLS/refs/pull/16998/merge/nodeEditor/
https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/TOOLS/refs/pull/16998/merge/nodeGeometryEditor/
https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/TOOLS/refs/pull/16998/merge/nodeRenderGraphEditor/
https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/TOOLS/refs/pull/16998/merge/guiEditor/

bjsplat · 2025-08-11T19:55:48Z

WebGL2 visualization test reporter:

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/refs/pull/16998/merge/testResults/webgl2playwright/index.html

bjsplat · 2025-08-11T19:55:56Z

Visualization tests for WebGPU

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/refs/pull/16998/merge/testResults/webgpuplaywright/index.html

… inputRefactor

bjsplat · 2025-08-15T23:25:33Z

Please make sure to label your PR with "bug", "new feature" or "breaking change" label(s).
To prevent this PR from going to the changelog marked it with the "skip changelog" label.

bjsplat · 2025-08-15T23:27:52Z

Please make sure to label your PR with "bug", "new feature" or "breaking change" label(s).
To prevent this PR from going to the changelog marked it with the "skip changelog" label.

bjsplat · 2025-08-15T23:40:56Z

Snapshot stored with reference name:
refs/pull/16998/merge

Test environment:
https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/refs/pull/16998/merge/index.html

To test a playground add it to the URL, for example:

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/refs/pull/16998/merge/index.html#WGZLGJ#4600

Links to test babylon tools with this snapshot:

https://playground.babylonjs.com/?snapshot=refs/pull/16998/merge
https://sandbox.babylonjs.com/?snapshot=refs/pull/16998/merge
https://gui.babylonjs.com/?snapshot=refs/pull/16998/merge
https://nme.babylonjs.com/?snapshot=refs/pull/16998/merge

To test the snapshot in the playground with a playground ID add it after the snapshot query string:

https://playground.babylonjs.com/?snapshot=refs/pull/16998/merge#BCU1XR#0

bjsplat · 2025-08-15T23:43:54Z

You have changed file(s) that made possible changes to the sandbox.
You can test the sandbox snapshot here:

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/SANDBOX/refs/pull/16998/merge/

bjsplat · 2025-08-15T23:44:22Z

You have made possible changes to one or more graph tools. To test the snapshots:

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/TOOLS/refs/pull/16998/merge/nodeEditor/
https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/TOOLS/refs/pull/16998/merge/nodeGeometryEditor/
https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/TOOLS/refs/pull/16998/merge/nodeRenderGraphEditor/
https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/TOOLS/refs/pull/16998/merge/guiEditor/

bjsplat · 2025-08-15T23:46:04Z

Building or testing the playground has failed.

If the tests failed, results can be found here:
https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/PLAYGROUND/refs/pull/16998/merge/testResults/

bjsplat · 2025-08-15T23:56:18Z

Visualization tests for WebGPU

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/refs/pull/16998/merge/testResults/webgpuplaywright/index.html

bjsplat · 2025-08-15T23:57:19Z

WebGL2 visualization test reporter:

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/refs/pull/16998/merge/testResults/webgl2playwright/index.html

bjsplat · 2025-08-16T00:00:17Z

You have made possible changes to the playground.
You can test the snapshot here:

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/PLAYGROUND/refs/pull/16998/merge/

The snapshot playground with the CDN snapshot (only when available):

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/PLAYGROUND/refs/pull/16998/merge/?snapshot=refs/pull/16998/merge

Note that neither Babylon scenes nor textures are uploaded to the snapshot directory, so some playgrounds won't work correctly.

Georgina added 4 commits August 7, 2025 11:37

message bar UX fix

f5c1683

Merge branch 'master' of https://github.com/BabylonJS/Babylon.js

331ea4d

there is still a bug!

9d5e5ba

Merge branch 'master' of https://github.com/BabylonJS/Babylon.js into…

99b67af

… inputRefactor

georginahalpern commented Aug 8, 2025

View reviewed changes

packages/dev/sharedUiComponents/src/fluent/primitives/textInput.tsx Show resolved Hide resolved

fix conversion bug

79ff254

try

4c34a72

sebavan requested a review from ryantrem August 8, 2025 18:23

merge w master

84238f7

forceint moved to input, fix input validation to be onkeyUp instead o…

6ac2ac4

…f keydown

Georgina added 2 commits August 15, 2025 15:11

Merge branch 'master' of https://github.com/BabylonJS/Babylon.js into…

1ed9dc4

… inputRefactor

add units to the spinbutton

78be549

Georgina added 2 commits August 15, 2025 19:21

working :)

3a69241

size

fc27b6a

delete file

e4091c7

georginahalpern marked this pull request as ready for review August 15, 2025 23:27

georginahalpern enabled auto-merge (squash) August 15, 2025 23:28

georginahalpern disabled auto-merge August 16, 2025 00:25

[Fluent/InspectorV2] Fix bugs in number/text input; Add input validation UX; Refactor colorPicker to use new components #16998

Are you sure you want to change the base?

[Fluent/InspectorV2] Fix bugs in number/text input; Add input validation UX; Refactor colorPicker to use new components #16998

Uh oh!

Conversation

georginahalpern commented Aug 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

bjsplat commented Aug 8, 2025

Uh oh!

bjsplat commented Aug 8, 2025

Uh oh!

bjsplat commented Aug 8, 2025

Uh oh!

bjsplat commented Aug 8, 2025

Uh oh!

bjsplat commented Aug 8, 2025

Uh oh!

bjsplat commented Aug 8, 2025

Uh oh!

bjsplat commented Aug 8, 2025

Uh oh!

bjsplat commented Aug 8, 2025

Uh oh!

bjsplat commented Aug 11, 2025

Uh oh!

bjsplat commented Aug 11, 2025

Uh oh!

bjsplat commented Aug 11, 2025

Uh oh!

bjsplat commented Aug 11, 2025

Uh oh!

bjsplat commented Aug 11, 2025

Uh oh!

bjsplat commented Aug 11, 2025

Uh oh!

bjsplat commented Aug 11, 2025

Uh oh!

bjsplat commented Aug 11, 2025

Uh oh!

bjsplat commented Aug 11, 2025

Uh oh!

bjsplat commented Aug 11, 2025

Uh oh!

bjsplat commented Aug 15, 2025

Uh oh!

bjsplat commented Aug 15, 2025

Uh oh!

bjsplat commented Aug 15, 2025

Uh oh!

bjsplat commented Aug 15, 2025

Uh oh!

bjsplat commented Aug 15, 2025

Uh oh!

bjsplat commented Aug 15, 2025

Uh oh!

bjsplat commented Aug 15, 2025

Uh oh!

bjsplat commented Aug 15, 2025

Uh oh!

bjsplat commented Aug 16, 2025

Uh oh!

Uh oh!

georginahalpern commented Aug 8, 2025 •

edited

Loading